<template>
	<el-container>
			<el-container>
				<el-header>
					<div class="left-panel">
						<el-button type="primary" icon="el-icon-plus" @click="sendDynamics">发布</el-button>
					</div>
					<div class="right-panel">
						<el-input v-model="search.keyword" placeholder="标题 / 内容" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</el-header>
				<el-main class="nopadding infinite-list" v-infinite-scroll="load" style="overflow:auto">
					<el-empty v-if="recordList.length==0" description="暂无数据" :image-size="100"></el-empty>
					<el-card v-for="item in recordList" class="infinite-list-item" :key="item.recordId" style="cursor: pointer">
						<template v-slot:header>
							<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.title">
								{{ item.title }}
							</div>
						</template>
						<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.content">
							{{ item.content }}
						</div>
						<div v-if="item.attachId!=undefined && item.attachId!=''">
							<el-image v-for="img in item.attachId.split(',')" :src="img" style="height: 100px;width: 100px;margin: 10px 5px 10px 5px"
									  fit="cover" :preview-src-list="item.attachId.split(',')"></el-image>
						</div>
						<div style="margin-top:10px;">
							<div style="display: contents;">
								<el-avatar :src="item.avatar" size="small"></el-avatar>
							</div>
								<div style="position: relative;top: -5px;display: inline-block;">
									<span style="margin-left: 15px">{{ item.createUserName }}</span>
									<span style="float: right;padding-left:10px">
										<el-icon><el-icon-clock/></el-icon>{{showtime(item.createTime)}}
									</span>
								</div>
								<div style="float: right;margin-bottom: 10px">
									<el-button type="text" @click="commRecord(item)" v-if="item.commFlag=='1'">评论</el-button>
									<el-button type="text" @click="editRecord(item)" v-if="item.createUser==accountId">编辑</el-button>
									<el-button type="text" @click="deleteRecord(item)" v-if="item.createUser==accountId">删除</el-button>
								</div>
						</div>
					</el-card>
				</el-main>
			</el-container>
		<el-aside>
			<el-container>
				<el-main class="nopadding">
					<el-calendar @click="upsearch" v-model="myDate"></el-calendar>
				</el-main>
				<el-footer style="text-align: center;">
					<el-button type="primary" @click="clearMyDate">全部</el-button>
				</el-footer>
			</el-container>
		</el-aside>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
	<comm-save-dialog v-if="dialog.commSave" ref="commSaveDialog" @closed="dialog.save=false"></comm-save-dialog>
</template>

<script>
import saveDialog from './save'
import commSaveDialog from './commsave.vue'
import moment from "moment";

export default {
	name: 'Dynamics Info',
	components: {
		saveDialog,
		commSaveDialog
	},
	data() {
		return {
			loadFlag:true,
			loadStatus:true,
			recordList: [],
			accountId:'',
			myDate:'',
			search: {
				myDate:"",
				page: 0,
				keyword: ""
			},
			dialog: {
				commSave:false,
				save: false
			},
		}
	},
	mounted() {
		this.accountId = this.$TOOL.data.get('USER_INFO').accountId;
	},
	methods: {
		load() {
			if(this.loadFlag&&this.loadStatus) {
				this.loadStatus = false;
				this.getDynamicsRecordList();
			}
		},
		async getDynamicsRecordList() {
			let res = await this.$API.info.dynamics.getDynamicsRecordList.get(this.search);
			if (res.code == 200) {
				if(res.data){
					this.recordList = this.recordList.concat(res.data);
					this.search.page = this.search.page + 10;
					this.loadStatus = true;
					if(res.data.length<10)
					{
						this.loadFlag = false
					}
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		sendDynamics(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		editRecord(item)
		{
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(item)
			})
		},
		commRecord(item)
		{
			this.dialog.commSave = true
			this.$nextTick(() => {
				this.$refs.commSaveDialog.open().setData(item)
			})
		},
		async deleteRecord(item){
			var res = await this.$API.info.dynamics.deleteDynamicsRecord.post({recordId: item.recordId});
			if(res.code == 200){
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.loadFlag = true;
				this.myDate='';
				this.search.myDate='';
				this.recordList = [];
				this.search.keyword="";
				this.search.page = 0;
				this.load();
				this.$message.success("删除成功")
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async upsearch() {
			if(this.myDate!='')
			{
				this.search.myDate=moment(this.myDate).format('YYYY-MM-DD');
			}
			this.myDate='';
			this.recordList = [];
			this.search.page = 0;
			this.loadFlag = true;
			this.load();
		},
		clearMyDate(){
			this.loadFlag = true;
			this.myDate='';
			this.search.myDate='';
			this.recordList = [];
			this.search.keyword="";
			this.search.page = 0;
			this.load();
		},
		handleSaveSuccess()
		{
			this.loadFlag = true;
			this.load();
		},
		showtime(time) {
			let date =
				typeof time === "number"
					? new Date(time)
					: new Date((time || "").replace(/-/g, "/"));
			let diff = (new Date().getTime() - date.getTime()) / 1000;
			let dayDiff = Math.floor(diff / 86400);

			let isValidDate =
				Object.prototype.toString.call(date) === "[object Date]" &&
				!isNaN(date.getTime());

			if (!isValidDate) {
				window.console.error("不是有效日期格式");
			}
			const formatDate = function(date) {
				let today = new Date(date);
				let year = today.getFullYear();
				let month = ("0" + (today.getMonth() + 1)).slice(-2);
				let day = ("0" + today.getDate()).slice(-2);
				let hour = today.getHours();
				let minute = today.getMinutes();
				let second = today.getSeconds();
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			};

			if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
				return formatDate(date);
			}
			return (
				(dayDiff === 0 &&
					((diff < 60 && "刚刚") ||
						(diff < 120 && "1分钟前") ||
						(diff < 3600 && Math.floor(diff / 60) + "分钟前") ||
						(diff < 7200 && "1小时前") ||
						(diff < 86400 && Math.floor(diff / 3600) + "小时前"))) ||
				(dayDiff === 1 && "昨天") ||
				(dayDiff < 7 && dayDiff + "天前") ||
				(dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前")
			);
		},
	}
}
</script>

<style scoped>
:deep(.el-calendar__header) {
	padding: 15px 0px 10px 0px;
	height: 60px;
	font-size: 18px;
}

:deep(.el-calendar-table .el-calendar-day) {
	height: 30px;
	text-align: center;
}

:deep(.el-calendar-table td) {
	border-bottom: 0px solid #EBEEF5;
	border-right: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr td:first-child) {
	border-left: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr:first-child td) {
	border-top: 0px solid #EBEEF5;
}

:deep(.el-calendar__body) {
	border-top: 1px solid #EBEEF5;
	padding: 5px;

	p {
		text-align: center;

		i {
			content: "";
			display: inline-block;
			width: 6px;
			height: 6px;
			background-color: #D0333C;
			border-radius: 50%;
			text-align: center;
		}

	}
}
:deep(.el-calendar__header) {
	border-bottom: 0px solid #EBEEF5;

	.el-calendar__title {
		display: none;
	}

	.el-calendar__button-group {
		margin-left: 10%;
	}
}
</style>
